<template>
  <div
    class="login_page"
    :style=" {'background-image': `url(${loginBgImg})`, 'background-size': '100% 100%'}"
  >
    <div class="menuBox">
      <div
        class="form_content"
        :style="{'width': type === 'login' ? '340px': '430px'}"
      >
        <div class="tltBox">
          <el-row>
            <el-col
              :span="16"
              class="form_head"
            >
              <span class="title">{{ type === 'login' ? $t('登录') : $t('注册') }}</span>
            </el-col>
            <el-col :span="8">
              <el-dropdown @command="handleCommand">
                <span class="el-dropdown-link">
                  <img
                    class="country-icon-1"
                    :src="countryData.find((item) => item.lang == locale)?.icon || zhIcon"
                    alt=""
                    width="50"
                  >
                  <el-icon>
                    <ArrowDown />
                  </el-icon>
                </span>
                <template #dropdown>
                  <el-dropdown-menu>
                    <el-dropdown-item
                      v-for="item in countryData"
                      :key="item.lang"
                      :command="item"
                    >
                      <img
                        class="country-icon"
                        :src="item.icon"
                      >
                    </el-dropdown-item>
                  </el-dropdown-menu>
                </template>
              </el-dropdown>
            </el-col>
          </el-row>
        </div>
        <!-- 登录 -->
        <div v-show="type === 'login'">
          <login :tenant-id="tenantId" />
          <div class="register-btn">
            <el-button
              link
              key="primary"
              type="primary"
              @click="type = 'reg'"
            >{{ $t('还没有账号？ 立即注册') }}</el-button>
          </div>
        </div>
        <!-- 注册 -->
        <div v-show="type === 'reg'">
          <register :tenant-id="tenantId" />
          <div class="register-btn">
            <el-button
              link
              key="primary"
              type="primary"
              @click="type = 'login'"
            >{{ $t('已有账号, 立即登录') }}</el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, getCurrentInstance, watch } from 'vue'
import { setCookie, getCookie, removeCookie, setLocalStorage } from '@/utils/cache'
import { useI18n } from 'vue-i18n'
import zhIcon from '@/assets/icon/zh-icon.png'
import enInco from '@/assets/icon/en-icon.png'
import arInco from '@/assets/icon/th-icon.png'
import malInco from '@/assets/icon/mala-icon.png'
import defaultBgImgJpg from '@/assets/img/bg.jpg'
import homeImg from '@/assets/login.jpg'
import login from './login.vue'
import register from './register.vue'

const { proxy } = getCurrentInstance()
const { $mUtils, $api } = proxy
let { locale } = useI18n()
let countryData = reactive([
  {
    lang: 'zh',
    icon: zhIcon
  },
  {
    lang: 'en',
    icon: enInco
  }
])
let currentCountry = ref({})
let fullLoading = ref(false)
let tenantId = ref('')
let loginBgImg = ref(homeImg)
let defaultBgImg = ref(defaultBgImgJpg)
let type = ref('login')

watch(currentCountry, (newVal, oldVal) => {
  console.log(newVal, oldVal);
}, {
  deep: true
})

onMounted(() => {
  if (getCookie(import.meta.env.VITE_VUETENANT_STR )) {
    removeCookie(import.meta.env.VITE_VUETENANT_STR )
  }
  getTenantByCode()
})


const handleCommand = (item) => {
  currentCountry = item
  setCookie(import.meta.env.VITE_VUELANG_STR , item.lang)
  locale.value = item.lang
}
// 获取租户信息
const getTenantByCode = async () => {
  fullLoading.value = true
  try {
    const { data } = await $api.system.tenant.getByCode('Nexus')
    setCookie(import.meta.env.VITE_VUETENANT_STR, data.tenantId)
    tenantId.value = data.tenantId
    //loginBgImg.value = data.fromUrl ? window.location.origin + '/api' + data.fromUrl : defaultBgImg.value
    loginBgImg.value = homeImg;
    setLocalStorage(`COMPANYINFO`, data)
    setLocale()
    fullLoading.value = false
  } catch {
    fullLoading.value = false
  }
}
const setLocale = () => {
  if (!getCookie(import.meta.env.VITE_VUELANG_STR)) {
    setCookie(import.meta.env.VITE_VUELANG_STR, 'zh')
  }
  const getLang = getCookie(import.meta.env.VITE_VUELANG_STR)
  locale.value = getLang
  currentCountry = countryData.find(item => item.lang === getLang)
}

</script>


<style lang="scss" scoped>
:deep() {
  .el-dropdown {
    line-height: 50px;
  }
  .el-form-item__label {
    width: 100%;
    text-align: left;
    line-height: 34px !important;
    font-size: 14px !important;
  }
  .el-input__inner {
    font-size: 14px !important;
    line-height: 34px;
    height: auto;
  }
}
.login_page {
  position: absolute;
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  .register-btn {
    text-align: right;
  }
}
.menuBox {
  position: absolute;
  right: 10%;
  top: 50%;
  transform: translateY(-50%);
  text-align: center;
  .logo_title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin: 0 0 40px;
    color: #fff;
  }
  .form_content {
    box-sizing: content-box;
    width: 340px;
    padding: 10px 30px 30px;
    border-radius: 5px;
    background-color: #fff;
    margin: 0 auto;
  }
  .tltBox {
    height: 50px;
    line-height: 50px;
    border-bottom: 1px solid #aab3be;
  }
  .form_head {
    text-align: left;
  }
  .title {
    font-size: 18px;
    font-weight: bold;
    color: #38a9ef;
  }
  .el-dropdown {
    padding: 0 10px;
    position: absolute;
    right: 0px;
    cursor: pointer;
  }
}
.country-icon {
  width: 38px;
  margin: 3px 0 0 0;
  border-radius: 4px;
}
.country-icon-1 {
  width: 38px;
  margin: 0 0 -7px;
  border-radius: 4px;
}
.login_logo {
  position: absolute;
  left: 68px;
  top: 46px;
}
</style>